<template lang="html">
	<div class="body_wrap">		
		<div>
			<van-swipe :autoplay="3000">
			  <van-swipe-item v-for="(image, index) in images" :key="index">
			    <img v-lazy="image.uploadFile.fileUrl" class="swipe_img"/>
			  </van-swipe-item>
			</van-swipe>			
		</div>
		
		<div class="title_wrap about">			
			<div>
				<div class="title">{{$t('message.companyProfile')}}</div>
				<div class="sub">Company Profile</div>
			</div>			
			<div>
				<div class="content">
					{{currentIntroduce}}
				</div>
			</div>
			<div class="about_bg">
				<img src="/img/company_img.png" alt="" />
			</div>			
		</div>

		<div class="title_wrap product">			
			<div>
				<div class="title">{{$t('message.productRecommendation')}}</div>
				<div class="sub">Product Center</div>
			</div>			
            <div class="list">
				<van-row gutter="10">
				  <van-col span="12" v-for="(item,index) in p_list" :key="index" class="li">
				  	<div class="li_img_wrap">
				  		<img :src="item.imgUrl" alt="" style="display: block;"/>
				  	</div>
				    <div class="li_content_info">
				    	<div class="title">{{item.title}}</div>
				    	<div class="sub">{{item.name}}</div>
				    </div>
				  </van-col>

				</van-row>            	
            </div>            
            <div class="more_wrap">
            	<van-button type="default" class="more" style="width: 150px;"  size="small" @click="link('/product')">
            		{{$t('message.more')}}
            	</van-button>
            </div>		
		</div>		
		
		
		
		<div class="title_wrap news">			
			<div>
				<div class="title">{{$t('message.productNews')}}</div>
				<div class="sub">Product News</div>
			</div>				
            <div class="list">
               <div class="li" v-for="(item,index) in p_news" :key="index">
				  	<div class="li_img_wrap">
				  		<img :src="item.imgUrl" alt="" style="border-radius: 2px;"/>
				  	</div> 
				  	<div class="li_content_info">
				  		<div class='time'>
				  			<div class='time1'>{{formatTime(item.createTime,2)}} </div>
				  			<div class='time2'>/ {{item.name}}</div>
				  			<div class='time3'> {{formatTime(item.createTime,1)}}</div>
				  		</div>
				  		<div class='content'>
				  			<div class="title">
				  				{{item.title}}
				  			</div>
				  			<div class="sub">
				  				{{item.describeInfo}}
 				  			</div>
				  		</div>
				  	</div>
               </div>            	
            </div>            
            <div class="more_wrap">
            	<van-button type="default" class="more" style="width: 150px;"  size="small" @click="link('/news')">
            		{{$t('message.more')}}
            	</van-button>
            </div>		
		</div>	
		
		<div style="height: 20px;"></div>
	</div>
</template>                                                                

<script>
import bus from '@/api/bus'	
export default {	
	name: 'homeIndex',
	data() {
	    return {
		    images: [],
			params:{
				current:1,
				relationTableId:1,
				size:10
			},	
			introduce:{zh:'',jap:'',en:''},
			currentIntroduce:'',
			news:{zh:[],jap:[],en:[]},
			p_news:[],
			productList:{zh:[],jap:[],en:[]},
			p_list:[]
	    };	  
	},
	watch:{
		 '$i18n.locale'(newValue) {
		 	this.p_list=this.productList[newValue]
		 	this.p_news=this.news[newValue]
		 	this.currentIntroduce=this.introduce[this.$i18n.locale]
		 }
	},
	methods: {	
		link(url){
			this.$router.push({path: url})			
		},
		formatTime(timer,num){
			let str
			if(num==1){
				str=timer.substring(0,4)
			}else{
				str=timer.substring(5,11)
			}			
			return str
		},		
        init(){
        	// 轮播图
			this.$Axios.Post(this.$baseUrl+'relationFile/homePage',this.params).then(res => {
				this.images = res.records
			})
			// 公司简介
    		this.$Axios.Get(this.$baseUrl+'contact_info/list').then(res => {
    			
    			this.introduce={
    				zh:res[0].introduce,
    				jap:res[0].jpnIntroduce,
    				en:res[0].engIntroduce
    			}
    		    this.currentIntroduce=this.introduce[this.$i18n.locale]
    		})	
    		let params={
				current:1,
				relationTableId:0,
				size:6,
				categoryId:1    			
    		}
    		// 新闻资讯
			this.$Axios.Post(this.$baseUrl+'relationFile/page',params).then(res => {             
               if(res.records.length>0){
					res.records.forEach(item=>{
						let zh={
							imgUrl:item.uploadFile.fileUrl,
							name:item.name,
							title:item.title,
							describeInfo:item.describeInfo,
							createTime:item.createTime
						}
						let en={
							imgUrl:item.uploadFile.fileUrl,
							name:item.engName,
							title:item.engTitle,
							describeInfo:item.engDescribe,
							createTime:item.createTime							
						}
						let jap={
							imgUrl:item.uploadFile.fileUrl,
							name:item.jpnName,
							title:item.jpnTitle,
							describeInfo:item.jpnDescribe,
							createTime:item.createTime							
						}
						this.news.zh.push(zh)
						this.news.jap.push(jap)
						this.news.en.push(en)
					})  
					this.p_news=this.news[this.$i18n.locale]	
               }
			}) 
			
			let params2={
				current:1,
				relationTableId:0,
				size:6,
				categoryId:2
			}
			this.$Axios.Post(this.$baseUrl+'relationFile/page',params2).then(res => {					
				if(res.records.length>0){
					res.records.forEach(item=>{
						let zh={
							imgUrl:item.uploadFile.fileUrl,
							name:item.name,
							title:item.title
						}
						let en={
							imgUrl:item.uploadFile.fileUrl,
							name:item.engName,
							title:item.engTitle							
						}
						let jap={
							imgUrl:item.uploadFile.fileUrl,
							name:item.jpnName,
							title:item.jpnTitle								
						}
						this.productList.zh.push(zh)
						this.productList.jap.push(jap)
						this.productList.en.push(en)
					})
					this.p_list=this.productList[this.$i18n.locale]					
				}
			})			
        }
	},
	mounted() {	
	    this.init()
	}
  }
</script>
<style lang="scss" scoped="">
.body_wrap{padding-bottom: 50px;}
.van-swipe{height: 250px;}
.swipe_img{width: 100%;height: 100%;}
.van-swipe__indicator{width: 36px!important;height: 16px!important;}


.title_wrap{margin-top: 5px;padding: 20px;position: relative;
  .title{font-size: 24px;color: #0099FF;}
  .sub{font-size: 12px;color: #999999;}  
}
.about{
  .content{font-size: 12px;color: #999999;margin-top: 10px;min-height: 144px;}
  .about_bg{position: absolute;top: 10%;right: 0;width: 100%;display: flex;justify-content: flex-end;height: 100%;
    img{width: 70%;opacity: 0.15;height: 85%;};	
  }
}

.product{
	.list{margin-top: 10px;
	  .li{margin-bottom: 10px;}
	  .li_img_wrap{
	  	img{width: 100%;border-radius: 2px 2px 0 0;}
	  }
	  .li_content_info{background: #f8f8f8;padding: 10px 10px;
	    .title{color: #333;margin-bottom: 10px;font-size: 12px;}
	    .sub{color: #999;font-size: 12px;}
	  }
	}
}

.news{
	.list{margin-top: 10px;
	  .li{display: flex;margin-bottom: 20px;	  
	    .li_img_wrap{width: 40%;
	      img{width: 100%;display: block;}
	    }
	    .li_content_info{flex: 1;padding-left: 10px;
	      position: relative;
	      .time{display: flex;padding-bottom:5px;border-bottom:1px solid #DCD9DC;
	        .time1{width: 20%;font-size: 14px;}
	        .time2{width: 60%;font-size: 12px;color: #999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
	        .time3{width: 20%;font-size: 12px;text-align: right;}
	      }
	      .content{margin-top: 8px;
	        .title{color: #000;font-size: 12px;margin-bottom: 5px;}
	        .sub{overflow: hidden;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
	      }
	      .action{
	      	width: 100%;
	      	position: absolute;
	      	bottom: 0;
	      	right: 0px;
	      	text-align: right;
	        img{width: 20px;height: 15px;}
	      }	      
	    }
	  }
	}
}

.more_wrap{display: flex;align-items: center;justify-content: center;margin-top:15px;}

</style>



